<template>
  <div>
    <h4 class="section-title">添加文字</h4>
    <!-- 点击卡片时触发 emit -->
    <div class="text-card" @click="emit('add-text', 'heading')">
      <div class="text-title">标题文本</div>
      <div class="text-subtitle">大标题</div>
    </div>

    <div class="text-card" @click="emit('add-text', 'subheading')">
      <div class="text-title">副标题文本</div>
      <div class="text-subtitle">副标题</div>
    </div>

    <div class="text-card" @click="emit('add-text', 'paragraph')">
      <div class="text-title">这是一段文字段落...</div>
      <div class="text-subtitle">正文段落</div>
    </div>

    <h4 class="section-title">文字样式</h4>
    <!-- 格式化按钮触发 emit -->
    <div class="text-format-tools">
      <button class="format-btn" @click="emit('format-text', 'bold')">
        <span class="format-icon bold">B</span>
      </button>
      <button class="format-btn" @click="emit('format-text', 'italic')">
        <span class="format-icon italic">I</span>
      </button>
      <button class="format-btn" @click="emit('format-text', 'underline')">
        <span class="format-icon underline">U</span>
      </button>
    </div>

    <!-- 字体、字号、颜色控件绑定到本地计算属性或直接触发 emit -->
    <div class="input-group">
      <label>字体:</label>
      <!-- 使用 v-model.lazy 或 @change 减少 emit 频率 -->
      <select class="font-select" :value="fontFamily" @change="updateStyle('fontFamily', ($event.target as HTMLSelectElement).value)">
        <option value="Arial">Arial</option>
        <option value="Times New Roman">Times New Roman</option>
        <option value="微软雅黑">微软雅黑</option>
        <option value="宋体">宋体</option>
        <option value="黑体">黑体</option>
      </select>
    </div>

    <div class="input-group">
      <label>字号:</label>
       <div class="size-controls">
         <!-- 字号调整也触发 emit -->
         <button class="size-btn" @click="adjustFontSize(-2)">-</button>
         <input type="number" class="size-input" :value="fontSize" @change="updateStyle('fontSize', parseInt(($event.target as HTMLInputElement).value) || props.fontSize)" />
         <button class="size-btn" @click="adjustFontSize(2)">+</button>
       </div>
    </div>

    <div class="input-group">
      <label>文字颜色:</label>
      <input type="color" class="color-picker" :value="color" @input="updateStyle('color', ($event.target as HTMLInputElement).value)" />
    </div>

    <h4 class="section-title">特效文字</h4>
    <div class="text-card effects-card" @click="emit('add-gradient-text')">
      <div class="text-title gradient-text">渐变文字</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  fontFamily: string;
  fontSize: number;
  color: string;
}>();

const emit = defineEmits<{
  (e: 'add-text', type: string): void;
  (e: 'add-gradient-text'): void;
  (e: 'format-text', format: string): void;
  (e: 'update-style', payload: { property: string, value: string | number }): void;
}>();

// 触发样式更新事件
function updateStyle(property: string, value: string | number) {
    console.log(`TextPanel: Emitting update-style - ${property}: ${value}`);
    emit('update-style', { property, value });
}

// 触发字号调整事件 (传递增量)
function adjustFontSize(delta: number) {
    const newValue = props.fontSize + delta;
    if (newValue >= 8) { // 简单限制最小字号
        updateStyle('fontSize', newValue);
    }
}

</script>

<style scoped>
/* 左侧栏通用 */
.section-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin: 15px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}
.input-group {
  margin-bottom: 15px;
}
.input-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #666;
}

/* 文字面板特定样式 */
.text-card {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 10px;
  cursor: pointer;
}
.text-card:hover {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.2);
}
.text-title {
  font-size: 16px;
  margin-bottom: 5px;
}
.text-subtitle {
  font-size: 12px;
  color: #6c757d;
  text-align: right;
}
.text-format-tools {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
.format-btn {
  width: 35px;
  height: 35px;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.format-btn:hover {
  background-color: #e9ecef;
}
.format-icon {
  font-size: 14px;
  line-height: 1;
}
.format-icon.bold { font-weight: bold; }
.format-icon.italic { font-style: italic; }
.format-icon.underline { text-decoration: underline; }

.font-select,
.color-picker,
.size-input {
  width: 100%;
}
.font-select {
  height: 34px;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.color-picker {
  height: 34px;
}
/* 字号控制样式 */
.size-controls {
  display: flex;
  align-items: center;
}
.size-btn {
  width: 30px;
  height: 30px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.size-input {
  flex: 1;
  text-align: center;
  margin: 0 5px;
  height: 30px;
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.gradient-text {
  background-image: linear-gradient(45deg, #f3ec78, #af4261);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
}
.effects-card {
  text-align: center;
  padding: 15px;
}
</style>